<template>
	<view class="realTimeOrder">
		<custom-header title="实时订单" />
		<view class="_wrap">
			<view class="header_wrap">
				<view class="list">
					<view class="title">
						<view class="icon">
							<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/buyer_icon.png" mode=""></image>
						</view>
						<view class="text">买家</view>
					</view>
					<view class="value">
						4000位
					</view>
				</view>
				<view class="list">
					<view class="title">
						<view class="icon">
							<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/deal_icon.png" mode=""></image>
						</view>
						<view class="text">交易</view>
					</view>
					<view class="value">
						9999扎
					</view>
				</view>
				<view class="list">
					<view class="title">
						<view class="icon">
							<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/total_icon.png" mode=""></image>
						</view>
						<view class="text">合计</view>
					</view>
					<view class="value">
						8888.88元
					</view>
				</view>
				<view 
					class="list"
					hover-class="custom_hover" 
					:hover-stay-time="200"
					@click="isShowDatetimePicker = true">
					<view class="title">
						<view class="icon">
							<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/time_icon.png" mode=""></image>
						</view>
						<view class="text">时间</view>
						<view class="icon1">
							<image src="/static/common/bottom2.png" mode=""></image>
						</view>
					</view>
					<view class="value">
						{{ selectDateTime || '今日' }}
					</view>
				</view>
			</view>
			
			<view 
				class="no_data" 
				:style="{height:'calc(100vh - 200rpx - '+statusBarHeight+'px)'}"
				v-if="!listData.length && listLoading != 'loading'">
					<view class="icon">
						<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nodata.png" mode=""></image>
					</view>
			</view>
			<scroll-view
				:scroll-y="true" 
				scroll-with-animation
				:style="{height:'calc(100vh - 145rpx - '+statusBarHeight+'px)'}"
				class="scroll_content_wrap"
				v-if="listData.length">
					<view class="table_wrap">
						<view class="tw_head">
							<view class="th name">商品名称</view>
							<view class="th number">数量</view>
							<view class="th price">单价</view>
							<view class="th total">小计</view>
						</view>
						<view class="tw_body" v-for="(item,index) in listData" :key="index">
							<view class="td name">
								{{ item.name }}<text>{{ item.grade }}</text>
							</view>
							<view class="td number">{{ item.number }}</view>
							<view class="td price">{{ item.price }}</view>
							<view class="td total">{{ item.total }}</view>
						</view>
					</view>
			</scroll-view>
			<view class="loading_wrap" v-if="listLoading == 'loading'">
				<up-loadmore
					:status="listLoading"
					iconSize="22"
					iconColor="#FF3316"
					loadingIcon='semicircle'
					loadingText=""
					/>
			</view>
		</view>
		<!-- 选择时间 -->
		<custom-select-time 
			:show="isShowDatetimePicker" 
			:defaultDate="selectDateTime"
			@close="isShowDatetimePicker = false" 
			@confirm="handleSelectTime">
		</custom-select-time>
	</view>
</template>

<script setup>
	import { ref,computed,onMounted } from 'vue';
	import { onReady } from '@dcloudio/uni-app';
	import { useStore } from 'vuex';
	const store = useStore();
	import { formatTime } from '@/utils/util.js'
	
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	});
	
	// 获取列表
	const listLoading = ref('loadmore');
	const listData = ref([]);
	const loadGetListData = ()=>{
		listData.value = []
		listLoading.value = 'loading'
		setTimeout(()=>{
			listData.value = [
				{
					id:1,
					name:'卡布奇诺10枝',
					grade:'E级',
					number:99,
					price:'12.88',
					total:'60.00'
				},
				{
					id:2,
					name:'卡布奇诺10枝',
					grade:'E级',
					number:99,
					price:'12.88',
					total:'60.00'
				},
				{
					id:3,
					name:'卡布奇诺10枝',
					grade:'E级',
					number:99,
					price:'12.88',
					total:'60.00'
				},
				{
					id:4,
					name:'卡布奇诺10枝',
					grade:'E级',
					number:99,
					price:'12.88',
					total:'60.00'
				}
			]
			listLoading.value = 'loadmore'
		},1000);
	};
	
	const isShowDatetimePicker = ref(false);
	const selectDateTime = ref('');
	const handleSelectTime = (e)=>{
		selectDateTime.value = e;
		loadGetListData();
	};
	
	
	onMounted(()=>{
		loadGetListData();
	})
</script>

<style lang="scss">
	.realTimeOrder{
		._wrap{
			// padding: 0 20rpx;
		}
		.header_wrap{
			padding:20rpx;
			display: flex;
			justify-content: space-between;
			.list{
				height: 102rpx;
				width: 166rpx;
				background: #fff;
				border-radius: 10rpx;
				text-align: center;
				.title{
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 15rpx 0 15rpx;
					.icon{
						width: 28rpx;
						height: 28rpx;
						display: flex;
					}
					.text{
						color: #999;
						font-size: 24rpx;
						padding-left: 10rpx;
					}
					.icon1{
						width:20rpx;
						height:11rpx;
						display: flex;
						margin-left: 10rpx;
					}
				}
				.value{
					font-size: 28rpx;
					color: #666;
				}
			}
		}
		.table_wrap{
			padding-bottom: 20rpx;
			.tw_head,.tw_body{
				display: flex;
				text-align: center;
				font-size: 24rpx;
				padding: 20rpx 0;
				.name{
					flex: 2;
					text{
						color: #F5564D;
					}
				}
				.number,.price,.total{
					flex: 1;
				}
			}
			.tw_head{
				background: #fff;
				color:#333333;
			}
			.tw_body{
				color: #666666;
				&:nth-child(2n+1){
					background: #fff;
				}
			}
		}
		.no_data{
			background: #fff;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 20rpx 20rpx 20rpx;
			.icon{
				width: 280rpx;
				height: 322rpx;
			}
		}
	}
</style>
